import React, { useEffect, useRef, useState } from 'react'
import { geCategory,UploadArticle } from '../../../api/Article-manageApi'

import ArticleEditor from '../../../components/article-manage/ArticleEditor';
import { PageHeader, Steps, Button, Form, Input, Select, message,notification } from 'antd';
import style from './NewAdd.module.scss'
const { Step } = Steps;
const { Option } = Select;


export default function NewsAdd(props) {
    // 控制步骤条的状态值
    const [current, setcurrent] = useState(0)
    // 存放文章类型的列表
    const [categoryList, setcategoryList] = useState([])
    // 保存第一步form的数据
    const [formInfo, setformInfo] = useState()
    // 保存第二步富文本的值
    const [editors, seteditors] = useState('')
    // 接收form的ref
    const MyForm = useRef(null)
    const User = JSON.parse(localStorage.getItem("token"))
    // 副作用函数，请求数据等
    useEffect(() => {
        geCategory().then(res => {
            setcategoryList(res.categoryList)
        })
    }, [])

    // 下一步按钮的回调
    const handleNext = () => {
        // 编辑文章标题时
        if (current === 0) {
            // 通过表单校验就到下一步
            MyForm.current.validateFields().then(res => {
                setformInfo(res)
                setcurrent(current + 1)
            }).catch(error => {
                console.log(error)
            })
        } else {
            if (editors==='' || editors.trim() === '<p></p>') {
                message.error('文章内容不能为空！')
            } else {
                setcurrent(current + 1)
            }
        }
    }
    // 上一步的回调
    const handlePrev = () => {
        setcurrent(current - 1)
    }
    // 提交和保存到草稿箱的回调
    const saveArtcle = (publishState) => { 
        // 发送提交请求
        UploadArticle({
            ...formInfo,
            content: editors,
            authorId: User.id,
            publishState,
            auditState:0
        }).then((res) => {
            console.log(res);
            if (publishState === 3) { 
                // 保存到草稿箱,就跳转至草稿箱
                props.history.push('/news-manage/draft')
            } else {
                // 否则跳转到审核列表
                props.history.push('/audit-manage/list')
            }
            notification.info({
                message: `通知`,
                description:
                  `您可以到${publishState===3?'草稿箱':'审核列表'}中查看您的新闻!`,
                placement:"bottomRight",
            });
        })
    }
    return (
        <div>
            <PageHeader
                className="site-page-header"
                title="编写文章"
                subTitle="This is a subtitle"
            />
            {/* 步骤条 */}
            <Steps current={current}>
                <Step title="基本信息" description="文章标题，文章分类" />
                <Step title="文章内容" description="文章主体内容" />
                <Step title="文章提交" description="保存草稿或者提交审核" />
            </Steps>
            {/* 主体内容 */}
            <div style={{ marginTop: '50px' }}>
                {/* 基本信息 */}
                <div className={current === 0 ? '' : style.active}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 3,
                        }}
                        wrapperCol={{
                            span: 21,
                        }}
                        ref={MyForm}
                    >
                        <Form.Item
                            label="文章标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入文章标题!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="文章类型"
                            name="categoryId"
                            rules={[{ required: true, message: '请选择文章类型!' }]}
                        >
                            <Select>
                                {
                                    categoryList.map(item =>
                                        <Option value={item.categoryId} key={item.categoryId}>{item.title}</Option>
                                    )
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
                {/* 文章内容 */}
                <div className={current === 1 ? '' : style.active}>
                    <ArticleEditor getContent={(value) => {
                        seteditors(value)
                    }}></ArticleEditor>
                </div>
            </div>
            {/* 控制步骤 */}
            <div style={{ marginTop: '50px' }}>
                {
                    current === 2 && <span>
                        <Button type="primary"
                            onClick={() => { saveArtcle(3) }}>
                            保存草稿箱
                        </Button>
                        <Button danger type="primary"
                            style={{ margin: '0 10px' }}
                            onClick={() => { saveArtcle(0) }}>
                            提交审核
                        </Button>
                    </span>
                }
                {
                    current < 2 && <Button type="primary"
                        onClick={handleNext}
                        style={{ marginRight: '10px' }} >
                        下一步
                    </Button>
                }
                {
                    current > 0 && <Button onClick={handlePrev}>上一步</Button>
                }
            </div>
        </div>
    )
}
